@rootSize:37.5rem;
*{
    margin: 0;
    padding: 0;
}

.all{
    // width: (375 / @rootSize);
    width: 100%;
    // padding: 0 (15/ @rootSize);
    // padding-left:(15/ @rootSize) ;
    margin-bottom:(50/ @rootSize) ;
    .header{
        padding: 0 (15/ @rootSize);
        height: (46 / @rootSize);
        // width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .header_left{
            width: (50 / @rootSize);
            height: (46 / @rootSize);
            line-height: (46 / @rootSize);
            padding-right: (25 / @rootSize);
            h4{
                font-size: (14 / @rootSize);
            }

        }
        .header_center{
            flex: 1;
            height: 100%;
            line-height: (46 / @rootSize);
            input{
                width: 100%;
                height: (32 / @rootSize);
                background-color: #f7f7f7;
                border-radius: (32 / @rootSize);
                color: #ccc;
            }
        }
        .header_right{
            margin-left: (26 / @rootSize);
            img{
                height: (17 / @rootSize);
                width: (17 / @rootSize);
                background-size: cover;
            }
        }


    }
    .main_pic{
        padding: (8 / @rootSize) (15 / @rootSize);
        .pic_top{
            img{
                height: (130 / @rootSize);
            }
        }
        .pic_bottom{
            text-align: center;
            height: (10 / @rootSize);
            img{
            width: ( 8 / @rootSize);
        }
        }

    }
    .main_pic2{
        padding: 0 (15 / @rootSize);
        margin-top: (12 / @rootSize);
        margin-bottom: (35 / @rootSize);
        display: flex;
        justify-content: space-between;
        height: (70 / @rootSize);
        .nav_left{
            flex: 1;
            img{
                 height: (70 / @rootSize);
            background-size: cover;
            }
           
        }
        .nav_right{
            flex: 1;
            img{
                height: (70 / @rootSize);
           background-size: cover;
           }
        }
    }
    .preferential{
        padding: 0 (15 / @rootSize);
        margin-bottom: (30 / @rootSize);
        .top{
            display: flex;
            justify-content: space-between;
            margin-bottom: (21 / @rootSize);
            h4{
                font-size: (18 / @rootSize);
            }
            img{
                height: (18 / @rootSize);
            }

        }
        .bottom{
            display: flex;
            justify-content: space-between;
            .bottom_left{
                img{
                    width: (170 / @rootSize);
                }
                p{
                    font-size: (12 / @rootSize);
                    margin-bottom: ( 8 / @rootSize);
                }
                span{
                    font-size: (12 / @rootSize);
                    // margin-bottom: ( 12 / @rootSize);
                }
                i{
                    font-size: (11 / @rootSize);
                    color: #f49d0c;
                }

            }
            .bottom_right{
                img{
                    width: (170 / @rootSize);
                }
                p{
                    font-size: (12 / @rootSize);
                    margin-bottom: ( 8 / @rootSize);
                }
                span{
                    font-size: (12 / @rootSize);
                    // margin-bottom: ( 12 / @rootSize);
                }
                i{
                    font-size: (11 / @rootSize);
                    color: #f49d0c;
                }
                
            }

        }
    }
    .help{
        padding: 0 (15 / @rootSize);
        img{
            height: (56 / @rootSize);
        }
    }
    .recomend{
        padding: 0 (15 / @rootSize);
        .top{
            display: flex;
            justify-content: space-between;
            margin-bottom: (24 / @rootSize);
            .top_left{
                h4{
                    font-size: (19/ @rootSize);
                }

            }
            .top_right{
                p{
                    font-size: (14 / @rootSize);
                }


            }
        }
        .bottom{
            ul{
                li{
                    margin-bottom: (18 / @rootSize);
                    display: flex;
                    .left{
                        margin-right: (16 / @rootSize);
                        img{
                            height: (85 / @rootSize);
                        }

                    }
                    .right{
                        h4{
                            font-size: (14 / @rootSize);
                        }
                        p{
                            width: (218 / @rootSize);
                            white-space: nowrap; 
                            overflow: hidden; 
                            text-overflow: ellipsis; 
                            font-size: (11 / @rootSize);
                            color: #ccc;
                        }
                        .right_bottom{
                            span{
                                font-size:(8 / @rootSize) ;
                                display: inline-block;
                                width: (45 / @rootSize);
                                height: (16 / @rootSize);
                                color:#ccc;
                                text-align: center;
                                border-radius: (5 / @rootSize);
                                border: 1px solid #ccc;
                            }
                        }
                        i{
                            color: #f49d0c;
                            font-size: (13 / @rootSize);
                        }

                    }
                }
            }
        }

    }
    .look{
        text-align: center;
        line-height:(38/ @rootSize) ;
        input{
            text-align: center;
            height: (38/ @rootSize);
            width: (260 / @rootSize);
            background-color: #f7f7f7;
            border-radius: (32 / @rootSize);
            color: #ccc;
        }
    }
    .story{
        margin-top: (24/ @rootSize);
        padding: 0 (15 / @rootSize);
        img{
            height: (85/ @rootSize);
        }
    }
    .footer{
        position: fixed;
        left: 0;
        bottom: 0;
        height:(50/ @rootSize) ;
        width: 100%;
        display: flex;
        justify-content: space-around;
        background-color: #fff;
        z-index: 9999;
        span{
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-evenly;
            i{
                font-size: (20 / @rootSize);
                color: #ccc;
            }
            p{
                font-size: (11 / @rootSize);
                color: #ccc;
            }
        }

    }
}